Type Technology 字型技術
OpenType 字型技術
OpenType是一種常見的字型格式，是微軟和Adobe公司在90年代共同創造的。它能讓字型展現更多有趣的效果。
從2010年開始，OpenType在網頁設計中變得越來越普及。它可以做很多實用的事情：調整文字之間的距離、讓字母搭配更美觀、使用不同樣式的數字等。這些原本只能在列印出來的文字上用的功能，現在網頁也能用了。最近，OpenType還支援了新型的可變字型，讓字型可以靈活地改變形狀。
Font format 字型格式
字型格式就像是字型的包裝盒，它把字型的樣子儲存成電腦可以使用的檔案。也就是說，設計好的字型必須先變成字型檔案，我們才能在電腦上使用它。
目前最普遍使用的是OpenType字型格式。它包括兩種型別：一種是TTF檔案（.ttf），另一種是CFF檔案（.otf）。這兩種檔案都可以製作可變字型（CFF需要用新版本），而且都能完美地轉換成網頁使用的WOFF或WOFF2格式，所有瀏覽器都能正常顯示這些字型。
Variable Fonts 可變字型
可變字型是2016年出現的一種新型字型。它最大的特點是一個字型檔案就能包含多種樣式，不像以前那樣需要多個檔案。你可以隨意調整字的粗細、寬度和大小，讓字型更靈活地適應不同場合。
比如說，你可以把字型調整成細一點的正文字型，或者粗一點的標題字型。這些調整可以自由組合，讓字型更好用。
可變字型使用"軸"這個概念來調整字型。每個"軸"就像是一個滑塊，可以控制字型的某個特徵（比如粗細）。設計師會給每個軸設定最大值和最小值，你可以在這個範圍內隨意調整。
可變字型有三個主要優點：
- 省空間：一個可變字型檔案就能代替多個普通字型檔案，能幫你節省很多儲存空間。
- 更自由：你可以很精確地調整字型。比如說，你想要的字型粗細剛好在"普通"和"中等"之間，這也沒問題。
- 更智慧：電腦可以根據實際情況自動調整字型，比如根據字的大小自動選擇最合適的樣式。
Parametric axis 引數軸
引數軸是可變字型的一個簡單調整功能，就像一個滑塊，可以改變字型的某個特定效果（比如字的粗細）。雖然這個功能主要是給專業字型設計師用的，但它的作用很實用，可以讓字型看起來更好看。
你可以用引數軸來調整字型的粗細、寬度或高度。不過要注意的是，要讓字型看起來最好，通常需要同時調整幾個不同的設定。這確實需要一些專業知識。
好訊息是，現在有一些簡單的"智慧"功能，讓普通人也能輕鬆使用這些調整。舉個例子，當你想調整字母的寬度時，系統會自動幫你調整字母之間的距離，這樣文字就會排得整整齊齊的。
System font, or web-safe font 系統字型與網頁安全字型
系統字型就是電腦、手機等裝置自帶的字型，使用者不需要另外下載就能直接使用。
以前網頁設計師的選擇很有限，只能用那些在Windows、Mac和Linux這些系統上都能找到的常見字型。
今天，系統字型還是很重要的，特別是在需要跨平臺使用的文件中。用CSS寫網頁時，只要輸入font-family: system-ui，系統就會自動選擇合適的字型：Windows電腦會用Segoe，蘋果裝置會用San Francisco，安卓手機會用Roboto。
Icon font 圖示字型
圖示字型就是用來顯示小圖示的特殊字型。它不像普通字型顯示文字，而是顯示各種圖示。比如說，Material Icons和Material Symbols這兩種圖示字型就很常用。Material Symbols更特別一些，因為你可以調整圖示的樣子，比如讓它變粗或變細。
圖示字型有幾個實用的優點：
- 放大不會模糊，圖示永遠都很清晰
- 所有圖示都在一個檔案裡，很省空間
- 在網頁上很好用，可以簡單地改變顏色和位置
- 能根據需要調整圖示樣式，和文字搭配得更好
Material Symbols 材料符號
Google字型庫提供了兩種實用的圖示字型，分別是Material Icons和Material Symbols。其中Material Symbols是新版本，它把2000多個可以調整的圖示都放在一個檔案裡。
這兩種圖示字型都有三種基本樣式：輪廓型、圓潤型和銳利型。Material Icons有一些特別的版本，比如雙色和填充效果。Material Symbols則更方便使用，因為你可以隨意調整圖示的粗細、填充程度、大小和層次感，讓圖示更好地配合你的文字設計。
如果你是設計師，你可以直接在Figma（一個設計軟體）裡安裝外掛來使用Material Symbols。
Faux, fake, pseudo, or synthesized 偽字型
有時候軟體找不到真正的字型檔案，它就會自己"假裝"製作一些特殊效果，比如把字型變斜或變粗。這種假裝出來的字型效果我們叫它"偽字型"。
讓我們看看真假字型的區別：真正的斜體、粗體和小型大寫字母看起來很自然；但是假的效果就差多了 - 斜體歪得不自然，粗體字擠在一起，小型大寫字母又細又瘦。
什麼時候會出現偽字型呢？通常有兩種情況：一是你的設計軟體裡沒有安裝需要的字型；二是網頁上的字型沒有正確載入。
Licensing 字型許可
字型許可是一組規則，告訴你可以怎麼使用這個字型。就像買東西要遵守商店的規則一樣，用字型也要遵守這些規定。
每個字型都有自己的使用規則，不管是免費還是付費的。當你使用一個字型時，就表示你同意遵守這些規則。每個字型檔案都會附帶一份說明書，解釋這些規則。
如果要買字型，價格會根據你的使用方式來定。比如說，你要在幾臺電腦上用？你的網站有多少人訪問？你要在App裡用嗎？這些都會影響價格。
這些規則雖然寫得很正式，但別擔心！廠商都會準備簡單的問答說明。如果你有不明白的地方，可以直接問字型廠商。
對了，還有一種特別好的字型叫開源字型。它們大多使用SIL開源字型許可證（SIL Open Font License），規則寫得很清楚，還有詳細的解答給你參考。
溫馨提示：這些都是基本說明，如果你要用在重要的商業專案上，最好找律師幫你看看。
Subsetting 字型子集化
字型子集化是一個簡單的概念：就是把一個大的字型檔案變小，只保留你需要的文字。
它有這些常見用途：
- 讓網頁載入更快，因為字型檔案變小了
- 製作字型的試用版本
- 只保留某種語言的文字，刪掉其他用不到的
- 只提取特定的字型樣式，比如小型的大寫字母
- 根據客戶的需求定製特別的文字樣式
現在網上有很多工具可以幫你做這件事，不過要先看看字型的使用規則是不是允許這樣做。。
Placeholder text 佔位文字
佔位文字就是用來暫時代替真實內容的文字。最有名的例子是"lorem ipsum"，這是一段拉丁文，故意選用這種大家看不懂的文字。雖然有些人叫它"希臘文"，但這個說法其實是不對的。
除了文字，有時候也會用灰色的條狀圖形作為佔位符，這樣網頁就能載入得更快。
我們用佔位文字的主要原因是希望人們把注意力放在設計上，而不是文字內容上。在做設計草圖或展示字型的時候，用佔位文字可以幫助大家更好地看出字型的樣子和整體效果。
File size 檔案大小
和網頁上的圖片、影片一樣，字型檔案也需要從網上下載到你的電腦上。檔案越大，網頁開啟得就越慢，所以我們要想辦法讓字型檔案變小一些。
最簡單的方法就是少用一些字型，只選擇真正需要的粗細和樣式。
這時候，可變字型就特別好用：它可以把很多種粗細和樣式（比如正常、斜體、粗體等）都放在一個檔案裡。這樣比分開下載每種樣式要省很多空間。而且可變字型幾乎可以調出任何你想要的樣式，讓文字變得更好看。
Reflow 文字重排
文字重排就是當你改變文字樣式時（比如字型大小或型別），文字在頁面上的排列位置會自動調整。比如說，有些文字可能會跳到下一行或上一行。
這在列印文件時可能會有問題，因為如果文字太多，有些內容可能會超出紙張範圍，導致文字顯示不完整。
在網頁上，文字重排是很常見的事情，因為網頁要在不同大小的螢幕上顯示。不過也會帶來一些小麻煩，比如用手機看網頁時，標題太長可能會佔據很多行，你要往下滑才能看到下面的內容。
要做好頁面設計，就要考慮到文字重排的問題，同時要讓頁面在不同裝置上都能看起來舒服。
FOIT 文字閃爍
當網頁正在載入特殊字型時，你可能會看到頁面上的文字暫時消失不見。這就是FOIT（文字閃爍）現象。這種情況對使用者來說很不方便，因為他們要等字型下載完才能看到文字。
要解決這個問題很簡單：我們可以在網頁程式碼中使用font-display這個設定。這樣網頁就會先用你電腦上已有的字型顯示內容，等特殊字型下載好了再換成新字型。想了解更多細節，可以看看"Using web fonts"這篇文章。
FOUT 文字切換閃爍
當網頁載入時，會先用系統預設字型顯示內容，等特殊字型下載完成後再切換過去，這種現象就叫做文字切換閃爍。雖然可以用CSS的font-display屬性來避免這種情況，但不建議這樣做，因為這樣會導致文字完全消失（FOIT現象）。
Faux, fake, pseudo, or synthesized 模擬字型效果
有時候，電腦上的字型顯示不是真實的字型，而是電腦自己模擬出來的效果。比如說，當我們想要斜體字或粗體字，但電腦裡沒有這些字型檔案時，電腦就會自己創造一個"假"的效果。
這種情況主要發生在兩種時候：
- 你的電腦裡沒有安裝需要的字型
- 瀏覽網頁時，網站的字型沒有正確載入
字型選擇器 Font picker
字型選擇器就是一個讓你選擇字型的小工具。它最常見的樣子是一個下拉選單，點開後你就能看到各種字型可以選。你還能選擇字型要粗一點還是細一點。
開啟常見的設計軟體，你會看到字型選擇器通常分成兩部分：上面是選字型的下拉選單，下面是選字型粗細和樣式的選單。比如你用Google文件時就能看到這樣的設計。
每個軟體顯示字型的方式都不太一樣。有些軟體把所有字型名字用同一種樣式顯示，有些會用字型本身的樣式來顯示，有些還會給你看字型的預覽。用Adobe或Word時，當你在字型列表裡上下選擇時，你選中的文字會馬上變成你現在選的字型樣式，讓你能直接看到效果。
Icon font 圖示字型
圖示字型是一種只包含圖示而不包含文字的特殊字型。比如 Material Icons 和 Material Symbols 就是兩個典型例子，其中 Material Symbols 是可變字型，能根據需要調整圖示樣式。
使用圖示字型有這些好處：
- 向量圖形可無限放大
- 單個檔案體積小
- 可用CSS輕鬆調整顏色和位置
- 可變圖示字型能更好地配合文字樣式
Type foundry 字型鑄造商
字型鑄造商是專門製作和釋出字型的機構。通常由字型設計師創立，有時甚至是一個設計師獨立運營。這個名字來自以前用金屬鑄造字型的傳統工藝。
Type designer 字型設計師
字型設計師專門設計字型。這和排版設計師不同——排版設計師是使用字型來進行設計的人。
字型鑄造商通常由一位或多位字型設計師組成，主要業務是銷售字型。很多時候，一個字型鑄造商可能就只有一位設計師在運營。
Typesetting 排版技術
排版就是按照一定的規則擺放文字，讓它們看起來整齊美觀，更重要的是讓人容易看懂。
現在我們只需要用電腦就能做排版了，不像以前那樣需要專業人員和複雜的裝置。不過這也意味著我們每個人都應該學習一些基本的排版知識，這樣才能把文字排得更好看。
Viewport 視窗
視窗是指瀏覽器中顯示網頁的區域，不包括瀏覽器的工具欄、標籤頁等介面元素。
視窗大小在全屏模式下可以和螢幕一樣大，但平時會比螢幕小一點。
在做網頁設計時，我們更關注視窗的大小，而不是裝置的螢幕尺寸。這是因為很多使用者並不會把瀏覽器視窗開到最大。
CSS提供了兩個簡單的單位來設定大小：vw（根據視窗寬度）和vh（根據視窗高度）。
